<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    
     <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>   
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
    


	<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="css/extralayers.css" media="screen" />	
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

	<!-- GOOGLE FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

	
	<!-- HEADER -->
	<header>
		<section class="container">
			<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
			<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
			<div style="clear:both"></div>
		</section>
	</header> <!-- END OF HEADER -->


	<!-- START REVOLUTION SLIDER 4.5.0 fullwidth mode -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,700,800,900' rel='stylesheet' type='text/css'>

<article style="width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:25px">
	<h1 style="font-weight: 100;font-size:30px;text-align:center;">Scroll Down to See our Parallax Scroll Slider</h1>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px 20px 20px 0px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px 0px 20px 20px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="clear:both"></div>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	<div style="width:100%;height:50px;"></div>
</article>


<article class="">

	<!--
	#################################
		- THEMEPUNCH BANNER -
	#################################
	-->
	<div class="tp-banner-container">
		<div class="tp-banner" >
				<ul>	<!-- SLIDE  -->
	<li data-transition="slideup" data-slotamount="7" data-masterspeed="1000" data-thumb="images/parallax_thumb1.jpg"  data-saveperformance="off"  data-title="Parallax 3D">
		<!-- MAIN IMAGE -->
		<img src="images/dummy.png"  alt="greenbg" data-lazyload="images/greenbg.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
		<!-- LAYERS -->

		<!-- LAYER NR. 1 -->
		<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-1"
			data-x="309"
			data-y="69" 
			data-speed="1000"
			data-start="800"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 2;"><img src="images/dummy.png" alt="" data-lazyload="images/3dlayer_6.png">
		</div>

		<!-- LAYER NR. 2 -->
		<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-1"
			data-x="-121"
			data-y="-238" 
			data-speed="1000"
			data-start="950"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-end="14950"
data-endspeed="1000"
			style="z-index: 3;"><img src="images/dummy.png" alt="" data-lazyload="images/3dlayer_5.png">
		</div>

		<!-- LAYER NR. 3 -->
		<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-1"
			data-x="-186"
			data-y="81" 
			data-speed="1000"
			data-start="1200"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 4;"><img src="images/dummy.png" alt="" data-lazyload="images/3dlayer_4.png">
		</div>

		<!-- LAYER NR. 4 -->
		<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-2"
			data-x="56"
			data-y="437" 
			data-speed="1000"
			data-start="1400"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 5;"><img src="images/dummy.png" alt="" data-lazyload="images/3dlayer_3.png">
		</div>

		<!-- LAYER NR. 5 -->
		<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-2"
			data-x="353"
			data-y="436" 
			data-speed="1000"
			data-start="1700"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 6;"><img src="images/dummy.png" alt="" data-lazyload="images/3dlayer_2.png">
		</div>

		<!-- LAYER NR. 6 -->
		<div class="tp-caption lft skewtoleftshort rs-parallaxlevel-3"
			data-x="100"
			data-y="55" 
			data-speed="1000"
			data-start="2000"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 7;"><img src="images/dummy.png" alt="" data-lazyload="images/3dlayer_1.png">
		</div>

		<!-- LAYER NR. 7 -->
		<div class="tp-caption black_heavy_60 customin randomrotateout tp-resizeme rs-parallaxlevel-3"
			data-x="746"
			data-y="230" 
			data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
			data-speed="1000"
			data-start="2400"
			data-easing="Power4.easeOut"
			data-splitin="chars"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">Fancy Stuff
		</div>

		<!-- LAYER NR. 8 -->
		<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
			data-x="750"
			data-y="320" 
			data-speed="1000"
			data-start="2900"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">Assign Parallax Levels
		</div>

		<!-- LAYER NR. 9 -->
		<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
			data-x="750"
			data-y="360" 
			data-speed="1000"
			data-start="3000"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 10; max-width: auto; max-height: auto; white-space: nowrap;">Control with Scroll or Mouse Movement
		</div>

		<!-- LAYER NR. 10 -->
		<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
			data-x="750"
			data-y="400" 
			data-speed="1000"
			data-start="3100"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 11; max-width: auto; max-height: auto; white-space: nowrap;">Strinking Effects for your Website
		</div>

		<!-- LAYER NR. 11 -->
		<div class="tp-caption black_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
			data-x="750"
			data-y="440" 
			data-speed="1000"
			data-start="3200"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 12; max-width: auto; max-height: auto; white-space: nowrap;">Easy Setup
		</div>

		<!-- LAYER NR. 12 -->
		<div class="tp-caption green_bold_bg_20 skewfromright randomrotateout tp-resizeme rs-parallaxlevel-2"
			data-x="750"
			data-y="480" 
			data-speed="1000"
			data-start="3300"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="1000"
			style="z-index: 13; max-width: auto; max-height: auto; white-space: nowrap;">And Much More ...
		</div>
	</li>
	<!-- SLIDE  -->
	<li data-transition="fade" data-slotamount="7" data-masterspeed="600" data-thumb="images/parallax_thumb2.jpg"  data-saveperformance="off"  data-title="Forest View">
		<!-- MAIN IMAGE -->
		<img src="images/dummy.png"  alt="forest1" data-lazyload="images/forest1.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
		<!-- LAYERS -->

		<!-- LAYER NR. 1 -->
		<div class="tp-caption greenishbg_heavy_70 customin fadeout tp-resizeme rs-parallaxlevel-3"
			data-x="center" data-hoffset="0"
			data-y="center" data-voffset="0"
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="600"
			data-start="900"
			data-easing="Power4.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="600"
			style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">Parallax with Scroll
		</div>

		<!-- LAYER NR. 2 -->
		<div class="tp-caption borderbox_725x130 tp-fade fadeout tp-resizeme rs-parallaxlevel-3"
			data-x="center" data-hoffset="0"
			data-y="center" data-voffset="0"
			data-speed="600"
			data-start="950"
			data-easing="Power4.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="600"
			style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">
		</div>
	</li>
	<!-- SLIDE  -->
	<li data-transition="zoomin" data-slotamount="7" data-masterspeed="1500" data-thumb="images/parallax_thumb3.jpg"  data-saveperformance="off"  data-title="Mobile Interaction">
		<!-- MAIN IMAGE -->
		<img src="images/dummy.png"  alt="slidebg2" data-lazyload="images/slidebg2.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
		<!-- LAYERS -->

		<!-- LAYER NR. 1 -->
		<div class="tp-caption lfb rs-parallaxlevel-3"
			data-x="center" data-hoffset="-40"
			data-y="bottom" data-voffset="-10"
			data-speed="1500"
			data-start="2400"
			data-easing="Power4.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 2;"><img src="images/dummy.png" alt="" data-lazyload="images/ipad2.png">
		</div>

		<!-- LAYER NR. 2 -->
		<div class="tp-caption customin rs-parallaxlevel-1"
			data-x="515"
			data-y="331" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="500"
			data-start="4400"
			data-easing="Power4.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 3;"><div class=" rs-pulse" 			data-easing="Power4.easeInOut"
			data-speed="0.5"
			data-zoomstart="0.75"
			data-zoomend="1"
>
<img src="images/dummy.png" alt="" data-lazyload="images/pulse1.png">
		</div>
		</div>

		<!-- LAYER NR. 3 -->
		<div class="tp-caption lfb rs-parallaxlevel-1"
			data-x="94"
			data-y="322" 
			data-speed="1500"
			data-start="3400"
			data-easing="Power4.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 4;"><img src="images/dummy.png" alt="" data-lazyload="images/hand1.png">
		</div>

		<!-- LAYER NR. 4 -->
		<div class="tp-caption lfb rs-parallaxlevel-4"
			data-x="693"
			data-y="191" 
			data-speed="1500"
			data-start="2900"
			data-easing="Power4.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 5;"><img src="images/dummy.png" alt="" data-lazyload="images/iphone.png">
		</div>

		<!-- LAYER NR. 5 -->
		<div class="tp-caption black_heavy_70 customin randomrotateout tp-resizeme rs-parallaxlevel-1"
			data-x="315"
			data-y="40" 
			data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;"
			data-speed="500"
			data-start="1300"
			data-easing="Power3.easeInOut"
			data-splitin="chars"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-end="13950"
data-endspeed="2000"
			style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">Mobile
		</div>

		<!-- LAYER NR. 6 -->
		<div class="tp-caption customin randomrotateout rs-parallaxlevel-1"
			data-x="434"
			data-y="98" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="300"
			data-start="1600"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="2000"
			style="z-index: 7;"><img src="images/dummy.png" alt="" data-lazyload="images/largegreen.png">
		</div>

		<!-- LAYER NR. 7 -->
		<div class="tp-caption light_heavy_70 customin randomrotateout tp-resizeme rs-parallaxlevel-1"
			data-x="448"
			data-y="106" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="300"
			data-start="1700"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-end="13950"
data-endspeed="2000"
			style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">Device
		</div>

		<!-- LAYER NR. 8 -->
		<div class="tp-caption black_bold_40 skewfromrightshort randomrotateout tp-resizeme rs-parallaxlevel-1"
			data-x="619"
			data-y="177" 
			data-speed="500"
			data-start="1950"
			data-easing="Power3.easeInOut"
			data-splitin="chars"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="2000"
			style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">Interaction
		</div>
	</li>
	<!-- SLIDE  -->
	<li data-transition="zoomout" data-slotamount="1" data-masterspeed="1500" data-thumb="images/parallax_thumb4.jpg"  data-saveperformance="off"  data-title="Fixed-Size Video">
		<!-- MAIN IMAGE -->
		<img src="images/dummy.png"  alt="citybg" data-lazyload="images/citybg.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
		<!-- LAYERS -->

		<!-- LAYER NR. 1 -->
		<div class="tp-caption white_bold_bg_20 sfl tp-resizeme rs-parallaxlevel-1"
			data-x="766"
			data-y="373" 
			data-speed="1000"
			data-start="2600"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">Vimeo
		</div>

		<!-- LAYER NR. 2 -->
		<div class="tp-caption red_bold_bg_20 sfl tp-resizeme rs-parallaxlevel-1"
			data-x="766"
			data-y="408" 
			data-speed="1000"
			data-start="2900"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">YouTube
		</div>

		<!-- LAYER NR. 3 -->
		<div class="tp-caption blue_bold_bg_20 sfl tp-resizeme rs-parallaxlevel-1"
			data-x="768"
			data-y="443" 
			data-speed="1000"
			data-start="3200"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">HTML5
		</div>

		<!-- LAYER NR. 4 -->
		<div class="tp-caption customin rs-parallaxlevel-2"
			data-x="925"
			data-y="299" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="300"
			data-start="1900"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 5;"><img src="images/dummy.png" alt="" data-lazyload="images/redbg.png">
		</div>

		<!-- LAYER NR. 5 -->
		<div class="tp-caption light_heavy_40 customin tp-resizeme rs-parallaxlevel-2"
			data-x="940"
			data-y="302" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="300"
			data-start="2200"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">with
		</div>

		<!-- LAYER NR. 6 -->
		<div class="tp-caption black_heavy_60 lft tp-resizeme rs-parallaxlevel-2"
			data-x="808"
			data-y="251" 
			data-speed="600"
			data-start="2600"
			data-easing="Power3.easeInOut"
			data-splitin="chars"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">Videos
		</div>

		<!-- LAYER NR. 7 -->
		<div class="tp-caption light_heavy_70 lfr tp-resizeme rs-parallaxlevel-2"
			data-x="1045"
			data-y="282" 
			data-speed="600"
			data-start="2500"
			data-easing="Power3.easeInOut"
			data-splitin="chars"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">API
		</div>

		<!-- LAYER NR. 8 -->
		<div class="tp-caption white_thin_34 customin tp-resizeme rs-parallaxlevel-2"
			data-x="1001"
			data-y="347" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="300"
			data-start="2800"
			data-easing="Power3.easeInOut"
			data-splitin="none"
			data-splitout="none"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="300"
			style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">Functions
		</div>

		<!-- LAYER NR. 9 -->
		<div class="tp-caption customin fadeout rs-parallaxlevel-3"
			data-x="-122"
			data-y="12" 
			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
			data-speed="500"
			data-start="1300"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="600"
			style="z-index: 10;"><img src="images/dummy.png" alt="" data-lazyload="images/ipad_dark.png">
		</div>

		<!-- LAYER NR. 10 -->
		<div class="tp-caption tp-fade fadeout rs-parallaxlevel-3"
			data-x="78"
			data-y="103" 
			data-speed="300"
			data-start="1600"
			data-easing="Power3.easeInOut"
			data-elementdelay="0.1"
			data-endelementdelay="0.1"
			data-endspeed="600"
			data-autoplay="false"
			data-autoplayonlyfirsttime="false"
			style="z-index: 11;"><iframe src='http://player.vimeo.com/video/76127035?title=0&byline=0&portrait=0;api=1' width='625' height='467' style='width:625px;height:467px;'></iframe>
		</div>
	</li>
</ul>	
			<div class="tp-bannertimer"></div>	
		</div>
	</div>	
</article>		

<article style="width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:25px">
	<h1 style="font-weight: 100;font-size:30px;text-align:center;">Scroll Up to See our Parallax Scroll Slider</h1>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px 20px 20px 0px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="float:left; width:25%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:20px 0px 20px 20px;text-align:justify;">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	</div>
	<div style="clear:both"></div>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	<div style="width:100%;height:50px;"></div>
</article>



			<script type="text/javascript">

				jQuery(document).ready(function() {
				
					
								
					jQuery('.tp-banner').show().revolution(
					{
						dottedOverlay:"none",
						delay:16000,
						startwidth:1170,
						startheight:700,
						hideThumbs:200,
						
						thumbWidth:100,
						thumbHeight:50,
						thumbAmount:4,
						
						navigationType:"none",
						navigationArrows:"solo",
						navigationStyle:"preview1",
						
						touchenabled:"on",
						onHoverStop:"on",
						
						swipe_velocity: 0.7,
						swipe_min_touches: 1,
						swipe_max_touches: 1,
						drag_block_vertical: false,
												
						parallax:"scroll",
						parallaxBgFreeze:"on",
						parallaxLevels:[10,20,30,40,50,60,70,80,90,100],
												
						keyboardNavigation:"off",
						
						navigationHAlign:"center",
						navigationVAlign:"bottom",
						navigationHOffset:0,
						navigationVOffset:20,

						soloArrowLeftHalign:"left",
						soloArrowLeftValign:"center",
						soloArrowLeftHOffset:20,
						soloArrowLeftVOffset:0,

						soloArrowRightHalign:"right",
						soloArrowRightValign:"center",
						soloArrowRightHOffset:20,
						soloArrowRightVOffset:0,
								
						shadow:0,
						fullWidth:"on",
						fullScreen:"off",

						spinner:"spinner4",
						
						stopLoop:"off",
						stopAfterLoops:-1,
						stopAtSlide:-1,

						shuffle:"off",
						
						autoHeight:"off",						
						forceFullWidth:"on",						
												
												
												
						hideThumbsOnMobile:"off",
						hideNavDelayOnMobile:1500,						
						hideBulletsOnMobile:"off",
						hideArrowsOnMobile:"off",
						hideThumbsUnderResolution:0,
						
						hideSliderAtLimit:0,
						hideCaptionAtLimit:0,
						hideAllCaptionAtLilmit:0,
						startWithSlide:0	
					});
					
					
					
									
				});	//ready
				
			</script>
			
<!-- END REVOLUTION SLIDER -->		
	</div>
</div>





</body>